<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.创建XMLHttpRequest对象
        let xhr=new XMLHttpRequest();
        console.log(xhr);
        // 2.发送HTTP请求
        // 初始化
        // 第一种请求方式：get
        xhr.open("get","https://api.vvhan.com/api/horoscope?type=leo&time=today",true);
        // 第二种请求方式：post
        // xhr.open("post","https://api.xygeng.cn/one",true);
        // 第一个参数：请求方式，get或者post
        // 第二个参数：请求地址
        // 第三个参数：布尔值，true表示使用异步，false表示使用同步，默认是true

        // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');

        // 发送请求
        xhr.send();
        // get方法请求，send里面不需要传入参数
        // post方法请求，send里面需要传入参数

        // 3.接受服务器传回的数据
        // 绑定事件，监听数据返回
        xhr.onreadystatechange=function(){
            // xhr.readyState属性，用于判断数据返回状态
            // 0：表示没有初始化，没有调用open方法
            // 1：表示启动，但是没有调用send方法
            // 2：表示发送，但是没有接收到头信息
            // 3：表示接收，但是只是接收到部分信息，没有接收完毕
            // 4：表示完毕，接收到所有信息
            if(xhr.readyState===4){
                // xhr.status属性，用于判断http状态码
                // 100-199：用于指定客户端相应的某些动作
                // 200-299：表示请求成功
                // 300-399：用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
                // 400-499：表示客户端的错误
                // 500-599：表示服务端错误
                if(xhr.status>=200 && xhr.status<=299){
                    // 4.处理返回的数据  
                    // xhr.response属性，用户接收返回的数据，返回值是字符串
                    console.log(xhr.response);
                    // 把字符串转成对象
                    let obj=JSON.parse(xhr.response);
                    console.log(obj);
                    console.log(obj.data.shortcomment);
                    document.body.innerHTML+=`<h2>${obj.data.shortcomment}</h2>`
                }
            }
        }
    </script>
</body>

</html>